<template>
    <div>

        <div>登录的vuex store 案例</div>


        <div class="bd">
            是否已经登录： {{$store.state.login.isLogin}}
        </div>


        <div class="btn-box" style="padding:20px 0;margin:30px auto; border:1px solid #ddd;width:500px;">
            <button @click="login">登录</button>
            <button @click="logout" style="margin-left:50px;">退出</button>

            <p style="font-size:12px;color:#999;">
                注： 登录成功后，可以点击链接4 查看计数器那边的登录态会同步，
                <br>意味着多个组件用的是同一个store数据
            </p>
        </div>

    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default{
    name: 'VueLoginDemo',
    methods: {
        ...mapActions('login',[
            'login',
            'logout'
        ])
    }

}
</script>

<style scoped>

</style>